<template>
  <!--el-select.v-model:绑定值-->
  <!--el-select.placeholder:占位符-->
  <!--el-option.label:选项的标签-->
  <!--el-option.value:选项的值-->
  <el-form :inline="true">
    <el-form-item label="一级分类">
      <el-select
        v-model="Category1Id"
        placeholder="请选择"
        @change="getCategory2"
        :disabled="disabled"
      >
        <el-option
          v-for="item in Category1List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="二级分类">
      <el-select
        v-model="Category2Id"
        placeholder="请选择"
        @change="getCategory3"
        :disabled="disabled"
      >
        <el-option
          v-for="item in Category2List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="三级分类">
      <el-select
        v-model="Category3Id"
        placeholder="请选择"
        @change="getCategory4"
        :disabled="disabled"
      >
        <el-option
          v-for="item in Category3List"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ClassSelector",
  props: ["disabled"],
  data() {
    return {
      Category1List: [],
      Category1Id: "",
      Category2List: [],
      Category2Id: "",
      Category3List: [],
      Category3Id: "",
    };
  },
  methods: {
    //一级分类产生变化; 清空二三级分类 重新获取二级分类;
    async getCategory2() {
      //清空二三级分类
      (this.Category2List = []),
        (this.Category2Id = ""),
        (this.Category3List = []),
        (this.Category3Id = "");

      //重新获取二级分类
      const { code, data } = await this.$api.product.attr.getCategory2(
        this.Category1Id
      );
      if (code === 200) {
        this.Category2List = data;
      }

      //向外部提供数据
      this.$emit("change", { class: 1, classId: this.Category1Id });
    },
    //二级分类产生变化; 清空三级分类 重新获取三级分类;
    async getCategory3() {
      //清空三级分类
      (this.Category3List = []), (this.Category3Id = "");

      //重新获取三级分类
      const { code, data } = await this.$api.product.attr.getCategory3(
        this.Category2Id
      );
      if (code === 200) {
        this.Category3List = data;
      }

      //向外部提供数据
      this.$emit("change", { class: 2, classId: this.Category2Id });
    },
    //三级分类产生变化
    getCategory4() {
      //向外部提供数据
      this.$emit("change", { class: 3, classId: this.Category3Id });
    },
  },
  async mounted() {
    const { code, data } = await this.$api.product.attr.getCategory1();
    if (code === 200) {
      this.Category1List = data;
    }
  },
};
</script>

<style scoped>
</style>
